<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
    <style>
      /** {
         border: 1px solid red; 
      }*/
      body {
        margin: 0;
        background-color: #f1f1f1;
      }
      .flex {
        display: flex;
      }
      .zhuYeMianTu {
        background: url(https://img-blog.csdnimg.cn/20200718094906390.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 40vh;
      }
      .box {
        height: 40v;
         border-radius: 1em; 
        width: 90vmin;
        flex-direction: column;
        margin: 16px;

      }
      .hengXiangJuZhong {
        justify-content: center;
      }
      .zongXiangPaiLie {
        flex-direction: column;
      }
      .zongXiangJuZhong {
        align-items: center;
      }
      .baiSeZi {
        color: white;
        font-size: 25px;
        
      }
      .boxDa{
        height: 25vh;
        width: 90vmin;
      }
      .boxXiao{
        height: 15vh;
        width: 86vmin;
        margin-top: 16px;
        margin-left: 2vh;
      }
      img{
        width: 100%;
        height: 100%;
      }
      .neiRongZi{
        font-family: Microsoft YaHei;
      }
      .ziTiJuZhong {
        text-align: center;
      }
      .shiLiangTu {
        height: 30px;
        width: 30px;
        margin-left: 20px;
        margin-right: 16px;
      }
      .yinYing {
        box-shadow: 2px 4px 6px #000;
      }
      .yuanJiao{
        border-top-left-radius: 1em;
border-top-right-radius: 1em;
      }      
    </style>
  </head>
  <body>
    <!-- 主题 -->
    <div class="zhuYeMianTu flex zongXiangPaiLie yinYing" >
      <!-- 头部栏 -->
      <div class="flex" style="height: 5vh;"></div>
      <div class="baiSeZi flex" style="justify-content: center; height: 15vh; align-items: flex-end;"><b style="margin-bottom: 16px;">Liang</b></div>
      <div class="flex" style="justify-content: center;">
        <img class="shiLiangTu"  src="img/qq.png" alt="">
        <img class="shiLiangTu" src="img/xuexi.png" alt="">
        <img class="shiLiangTu" src="img/mail.png" alt="">
      </div>
    </div>
    <!-- 内容 -->
    <div class="flex zongXiangJuZhong zongXiangPaiLie  yinYing">
      <!-- 1 -->
      <div class="box flex  yinYing">
        <!-- 盒子大 -->
        <div class="boxDa"><img class="yuanJiao" src="https://t11.baidu.com/it/u=1571939299,3390247063&fm=175&app=25&f=JPEG?w=640&h=512&s=1A42AA4CDA65A7550EC53C06010080C1" alt=""></div>
        <!-- 盒子小 -->
        <div class="boxXiao">
          <b style="font-family: 幼圆;font-size: 20px;">Liang的第一个网站</b>
          <p style="margin: 2px;font-size: 12px;">2022-09-19</p>
          <p >看了康老师的视频，励志做自己的个人网站，网站真的难</p>
        </div>
      </div>
      <!-- 2 -->
      <div class="box flex yinYing">
        <!-- 盒子大 -->
        <div class="boxDa"><img class="yuanJiao" src="https://t11.baidu.com/it/u=3710272444,2486727629&fm=175&app=25&f=JPEG?w=640&h=512&s=D2C2BE4146B2B7DCDC7818070100E0C0" alt=""></div>
        
        <!-- 盒子小 -->
        <div class="boxXiao" >
          <b style="font-family: 幼圆;font-size: 20px;">终于考过驾照</b>
          <p style="margin: 2px; font-size: 12px;">2022-08-25</p>
          <p >经历了驾校停课，考试服务器崩溃，很幸运一遍过</p>

        </div>
      </div>     
    </div>
  </body>
</html>
